<template>
	<!-- 首页的团购 -->
	<view>
		<view class="shopBar">
			<view class="shopbg">
				<view v-for="(item,index) in shopObj" @click="tabpar(item)" :key="index">
					<view class="shopimg">
						<image class="shopI" :src="item.img"></image>
						<view class="bommShop"> 
							<text class="text01">{{item.title}}</text>
							<view class="text02">
								<view style="display: flex;align-items: center;height: 30%;">
									<view style="width: 300rpx;height: 20rpx;background-color: #EBEBEB;border-radius: 20rpx;margin-right: 10rpx;"></view>
									<text style="float: right;font-size: 26rpx;"> {{item.minimumNumber}}人成团\n</text>
								</view>
								<text style="font-size: 26rpx;color: #999999;">已拼团{{item.sales}}件\n</text>
								<text class="shoptext01">￥{{item.originalPrice/100}}</text>
								<text style="color: red;font-size: 34rpx;">￥{{item.price/100}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oro: true,
				butObj: {
					i: 0,
					list: [{
							i: 0,
							obj: "销量优先"
						},
						{
							i: 1,
							obj: "价格"
						}
					]
				},
				shopObj: [],
				ide:''
			}
		},
		onLoad: function(option) {
			let that = this;
			uni.request({
				url: 'http://192.168.1.54:8081/m.api',
				data: {
					_gp: 'groupshop',
					_mt: 'getGroupShopPage',
				},
				success(res) {
					console.log(res,"455555")
					that.shopObj = res.data.data.items
					console.log(that.shopObj)
				}
			})
		},
		methods: {
			cutTab(index) {
				if (this.butObj.i == 1) {
					this.oro = !this.oro;
				} else {
					this.oro = true;
				}
				this.butObj.i = index;
			},
			tabpar(item,index){
				// console.log(item)
				let id = item.spuId
				// console.log(id)
				uni.navigateTo({
					url: '/pages/details/producte?dataset='+id,
				})
			}
		},
		
	
	}
</script>

<style>
	
	.bommShop{
		width: 65%;
		height: 80%;
		margin-left: 5%;
	}
	
	.shoptext01{
		font-size: 26rpx;
		color: #303133;
		text-decoration: line-through;
	}
	
	.bomm{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.nei01 {
		width: 100%;
		height: 88rpx;
		position: fixed;
		z-index: 999;
		background-color: #F3F3F3;
	}

	.shopI {
		width: 30%;
		height: 80%;
	}

	.shopbg {
		width: 100%;
		height: auto;
	}

	.shopimg {
		width: 100%;
		height: 282rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.text01 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		font-size: 30rpx;
		color: #303133;
		width: 100%;
		line-height: 60rpx;
	}

	.text02 {
		width: 90%;
		height: 80%;
	}

	.shopBar {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		background-color: white;
	}
</style>
